<template>
  <div class="search_ma" style="overflow: hidden;margin: 0 6px">
    <header class="top_bar">
      <div @click="goHome()" class="icon_back"></div>
      <form class="goods_search" v-on:submit.prevent>
        <input type="search" class="goods_search_content" placeholder="搜索" v-model="keyword" @change="goSearch($event)">
      </form>
      <a href="#" class="icon_menu"></a>
    </header>
    <section class="search_condition">
      <ul>
        <li>
          <span class="all">综合</span>
          <em class="all_icon"></em>
        </li>
        <li class="p_price">
          <span>价格</span>
          <em class="price_up" @click="getByPriceUp()"></em>
          <em class="price_down" @click="getByPriceDown()"></em>
        </li>
        <li>
          <span>分类</span>
        </li>
      </ul>
    </section>
    <main class="share_quality_left not_eng_box">
      <div class="share_quality_left not_eng_box">
        <ul>
          <div class="its" v-for="item in mDatas" :key="item.id" style="height: 280px;">
            <router-link :to="'/detail/'+item.id" class="not_eng_link">
              <img v-lazy="item.picUrl" alt="">
              <div class="not_eng_info">
                <p class="not_eng_title">
                  {{item.name}}
                </p>
                <p class="not_eng_text">
                  <i style="text-decoration: none;font-style: normal;font-size: 12px">¥</i>
                  <span class="more_info_price_txt">{{item.retailPrice}}</span>
                </p>
              </div>
            </router-link>
          </div>
        </ul>
      </div>
    </main>
  </div>
</template>
<script>
export default {
  data() {
    return {
      keyword: '',
      mDatas: [],
      remindValue: ['', '', '赠送'],
      plusFlag: ['', '+', '  ']
    }
  },
  methods: {
    goHome() {
      var _this = this
      _this.$router.push('/home')
    },
    goSearch(event) {
      let _this = this
      if (_this.keyword == '') {
        MessageBox.alert('请输入商品名称')
      } else {
        _this.$http
          .get('/mechanismadmin/mobile/search', {
            params: {
              kw: _this.keyword,
              order: ''
              //sort: 'price'
            }
          })
          .then(
            res => {
              _this.mDatas = res.data.data
              console.log(_this.mDatas + 'mdatas')
            },
            err => {
              console.log(err)
            }
          )
      }

      window.event ? (window.event.returnValue = false) : event.preventDefault()
    },
    getByPriceUp() {
      let _this = this
      if (_this.keyword == '') {
        MessageBox.alert('请输入商品名称')
      } else {
        _this.$http
          .get('/mechanismadmin/mobile/search', {
            params: {
              kw: _this.keyword,
              order: 'asc'
              //sort: 'price'
            }
          })
          .then(
            res => {
              _this.mDatas = res.data.data
              console.log(_this.mDatas)
            },
            err => {
              console.log(err)
            }
          )
      }
    },
    getByPriceDown() {
      let _this = this
      if (_this.keyword == '') {
        MessageBox.alert('请输入商品名称')
      } else {
        _this.$http
          .get('/mechanismadmin/mobile/search', {
            params: {
              kw: _this.keyword,
              order: 'DESC'
              //sort: 'price'
            }
          })
          .then(
            res => {
              _this.mDatas = res.data.data
              console.log(_this.mDatas)
            },
            err => {
              console.log(err)
            }
          )
      }
    }
  }
}
</script>
<style>
.not_eng_pic {
  display: block;
  width: 86%;
  height: 174px;
  overflow: hidden;
  margin: 5px 0 5px 5px;
}
.left_share_quality_content {
  width: 100%;
  margin-bottom: 15%;
}
</style>